﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>treeview示例</title>
<link rel="stylesheet" type="text/css" href="../../../../frame/theme/treeview.css"/>
<script type="text/javascript" language="javascript" src="../../../../common/js/common.js"></script>
<script type="text/javascript"  language="javascript" src="../../../../frame/js/treeview.js"></script>
</head>
<body style="margin:0px;padding:2px;font-size:12px">
<table width="998" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed; border-collapse:collapse">
<colgroup><col width="25%" valign="top" /><col width="75%" valign="top"  /></colgroup>
<tr><td valign="top">
<div id="treeContainer"></div>
<div id="treeContainer1" style="width:300px"></div>
<button type="button" onclick="addNode();">动态添加节点</button>
<button type="button" onclick="delNode();">动态删除节点</button>
</td>
<td>
<textarea id="htmlsrc" style="clear:both" cols="85" rows="30"></textarea>
</td></tr></table>
<script type="text/javascript"  language="javascript">
	function onDblClk() {
		var x = arguments[0];
		alert(x.label);
	}
	function onLeave(tvi){alert(tvi.label);}
	var tvroot = createTreeView({ id: 'idroot',label: '根节点', nodeType: 0, expanded: true, labelDblClick: onDblClk, children: [{id:'idsubleaf',label:'叶节点'},{ id: 'idsub0', label: '节点0', children: [{ id: 'idsubsub01', label: '节点01', children: [{ id: 'idsubsub011', label: '节点011'}] }, { id: 'idsubsub02', label: '节点02'}]}] });
	//tvroot.onleave=onLeave;
	var tvidsub1 = createTreeView({ id: 'idsub1', label: '节点1', nodeType: 1,desc:''});
	tvroot.appendChild(tvidsub1);
	var tvidsubsub11 = createTreeView({ id: 'idsubsub11', label: '节点11', nodeType: 2, data: ''});
	tvidsub1.appendChild(tvidsubsub11);
	var tvidsubsub12 = createTreeView({ id: 'idsubsub12', label: '节点12', nodeType: 1, data: ''});
	tvidsub1.appendChild(tvidsubsub12);
	var tvidsubsub121 = createTreeView({ id: 'idsubsub121', label: '节点节点节点节点节点节点121', nodeType: 2 });
	tvidsubsub12.appendChild(tvidsubsub121);
	var tvidsub2 = createTreeView({ id: 'idsub2', label: '节点2'});
	tvroot.appendChild(tvidsub2);
	var innerHTML = tvroot.render(TreeViewRenderTemplet.create({ showJoint: true, itemHeight: 38, iconPath:'sample_images/websitemenu/'}));
	
	document.getElementById("treeContainer").innerHTML = innerHTML;
	
	var outlineRoot = createTreeView({ id: 'tv_outline_root', label: '模块列表', nodeType: 0, desc: ''});
	var tvia_1_1 = createTreeView({ id: 'id1', nodeType: 1, label: '业务档案 ', desc: '业务档案说明' });
	outlineRoot.appendChild(tvia_1_1);
	var tvia_2_1 = createTreeView({ id: 'id2', nodeType: 1, label: '电子公告' });
	tvia_1_1.appendChild(tvia_2_1);
	var subtvia_2_1 = createTreeView({ id: 'id3', label: '最新公告', desc: '最新公告说明' });
	tvia_2_1.appendChild(subtvia_2_1);
	var subtvia_2_1 = createTreeView({ id: 'id4', label: '待发布公告' });
	tvia_2_1.appendChild(subtvia_2_1);
	var subtvia_2_1 = createTreeView({ id: 'id5', label: '所有公告' });
	tvia_2_1.appendChild(subtvia_2_1);
	var tvia_3_1 = createTreeView({ id: 'id6', nodeType: 1, label: '发文管理' });
	tvia_2_1.appendChild(tvia_3_1);
	var subtvia_3_1 = createTreeView({ id: 'id7', label: '待办发文' });
	tvia_3_1.appendChild(subtvia_3_1);
	var subtvia_3_1 = createTreeView({ id: 'id8', label: '所有发文', selected: true });
	tvia_3_1.appendChild(subtvia_3_1);
	var tvia_2_2 = createTreeView({ id: 'id9', nodeType: 1, label: '单位通信录' });
	tvia_1_1.appendChild(tvia_2_2);
	var subtvia_2_1 = createTreeView({ id: 'id10', label: '单位通讯录' });
	tvia_2_2.appendChild(subtvia_2_1);
	var tvia_1_2 = createTreeView({ id: 'id11', nodeType: 1, label: '知识资料中心' });
	outlineRoot.appendChild(tvia_1_2);
	var subtvia_1_1 = createTreeView({ id: 'id12', label: '待发布资料' });
	tvia_1_2.appendChild(subtvia_1_1);
	var subtvia_1_1 = createTreeView({ id: 'id13', label: '所有知识资料' });
	tvia_1_2.appendChild(subtvia_1_1);
	var tvia_1_3 = createTreeView({ id: 'id14', nodeType: 1, label: '调查与投票' });
	outlineRoot.appendChild(tvia_1_3);
	var subtvia_1_1 = createTreeView({ id: 'id15', label: '最新问卷' });
	tvia_1_3.appendChild(subtvia_1_1);
	var subtvia_1_1 = createTreeView({ id: 'id16', label: '所有问卷' });
	tvia_1_3.appendChild(subtvia_1_1);
	var tvia_1_4 = createTreeView({ id: 'id17', nodeType: 1, label: '网络期刊' });
	outlineRoot.appendChild(tvia_1_4);
	var subtvia_1_1 = createTreeView({ id: 'id18', label: '网络期刊' });
	tvia_1_4.appendChild(subtvia_1_1);
	var subtvia_1_1 = createTreeView({ id: 'id19', label: '网络文章' });
	tvia_1_4.appendChild(subtvia_1_1);
	var subtvia_1_1 = createTreeView({ id: 'id20', label: '网络文章发布' });
	tvia_1_4.appendChild(subtvia_1_1);
	var tvia_1_5 = createTreeView({ id: 'id21', nodeType: 1, label: '处室文库' });
	outlineRoot.appendChild(tvia_1_5);
	var subtvia_1_1 = createTreeView({ id: 'id22', label: '所有文库' });
	tvia_1_5.appendChild(subtvia_1_1);
	var tvia_1_6 = createTreeView({ id: 'id23', label: '微软网站' });
	outlineRoot.appendChild(tvia_1_6);
	var tvia_1_7 = createTreeView({ id: 'id24', nodeType: 1, label: '投票结果' });
	outlineRoot.appendChild(tvia_1_7);
	var subtvia_1_1 = createTreeView({ id: 'id25', label: '投票结果' });
	tvia_1_7.appendChild(subtvia_1_1);

	innerHTML = outlineRoot.render(TreeViewRenderTemplet.create({ root: 'outlineRoot', iconPath:'sample_images/',availWidth: 200, showRoot: false, selectCss: 'background:red none;font-weight:bold;color:yellow', color: 'blue', selectColor: 'white' })); //leafIcon: '', folderOpenIcon: '', folderCloseIcon: ''
	document.getElementById("htmlsrc").value = innerHTML;
	document.getElementById("treeContainer1").innerHTML = innerHTML;

	//var start = new Date().valueOf();
	//for (var i = 0; i < 10000; i++) {
	//var tv=createTreeView({id:'7BDE01A12D5F4632BF4C9520EDF11E62',label:'测试',availWidth:192});
	//tvia_1_1.appendChild(tv);
	//}
	//var end = new Date().valueOf();
	//alert(end-start);
	function addNode() {
		outlineRoot.appendChild({ id: 'id26', label: '动态添加1' });
		tvia_3_1.appendChild({ id: 'id27', label: '动态添加2' });
		tvia_1_6.appendChild({ id: 'id28', label: '动态添加3' });
	}
	function delNode() {
		subtvia_3_1.remove();
		tvia_1_7.remove();
	}
</script>
</body>
</html>
